<template>
  <div class="panorama-container">
    <div class="panorama-viewer">
      <PanoramaViewer
              :currentRoom="currentRoom"
              :hotspots="hotspots"
              @room-change="changeRoom"
      />
    </div>
    <div class="floor-plan" v-if="visiable">
      <FloorPlan
              :rooms="rooms"
              :currentRoom="currentRoom"
              @select-room="changeRoom"
      />
    </div>
  </div>
</template>

<script>
  import PanoramaViewer from '../components/SciencePopularization/PanoramaViewer.vue'
  import FloorPlan from '../components/SciencePopularization/FloorPlan.vue'
  import {EventBus} from "../utils/event-bus";

  export default {
    name: 'SciencePopularization',
    components: {
      PanoramaViewer,
      FloorPlan
    },
    data() {
      return {
        visiable:false,
        currentRoom: 'living-room',
        rooms: [
          // {
          //   id: 'living-room',
          //   name: '北湖节点01',
          //   position: { top: '30%', left: '60%' }
          //  },
          // {
          //   id: 'bedroom1',
          //   name: '观赏草原',
          //   position: { top: '50%', left: '30%' }
          //  },
          // {
          //   id: 'bedroom2',
          //   name: '北湖节点02',
          //   position: { top: '70%', left: '45%' }
          // }
        ],
        hotspots: {
          // 'living-room': [
          //   {
          //     id: 'tree',
          //     type: 'media', // 自定义类型
          //     title: '多样性系统',
          //     text: '一颗大树',
          //     position: { pitch: -5, yaw: 10 },
          //     description: `
          //       <p>天目铁木</p>
          //       <ul>
          //         <li>珍惜濒危植物+</li>
          //         <li>树龄60年</li>
          //         <li>高15米</li>
          //       </ul>
          //     `,
          //     video: 'tv-demo.mp4',
          //     poster: 'sw1.jpg',
          //     images: ['sw2.jpg', 'sw3.jpg']
          //   },
          //   {
          //     id: 'tv',
          //     type: 'media', // 自定义类型
          //     title: '多样性系统',
          //     text: '教学楼',
          //     position: { pitch: 10, yaw: 140 },
          //     description: `
          //         <p>天目铁木</p>
          //       <ul>
          //         <li>珍惜濒危植物+</li>
          //         <li>树龄60年</li>
          //         <li>高15米</li>
          //       </ul>
          //     `,
          //     video: 'tv-demo.mp4',
          //     poster: 'sw1.jpg',
          //     images: ['sw2.jpg', 'sw3.jpg']
          //   },
          //   {
          //     id: 'window',
          //     type: 'media', // 自定义类型
          //     title: '多样性系统',
          //     text: '长椅',
          //     position: { pitch: -5, yaw: 210 },
          //     description: `
          //         <p>天目铁木</p>
          //       <ul>
          //         <li>珍惜濒危植物+</li>
          //         <li>树龄60年</li>
          //         <li>高15米</li>
          //       </ul>
          //     `,
          //     video: 'tv-demo.mp4',
          //     poster: 'sw1.jpg',
          //     images: ['sw2.jpg', 'sw3.jpg']
          //   }
          // ],
          // 'bedroom1': [
          //   {
          //     id: 'bed',
          //     type: 'media', // 自定义类型
          //     title: '多样性系统',
          //     text: '1.8米双人床',
          //     position: { pitch: -10, yaw: 35 },
          //     description: `
          //        <p>天目铁木</p>
          //       <ul>
          //         <li>珍惜濒危植物+</li>
          //         <li>树龄60年</li>
          //         <li>高15米</li>
          //       </ul>
          //     `,
          //     video: 'tv-demo.mp4',
          //     poster: 'sw1.jpg',
          //     images: ['sw2.jpg', 'sw3.jpg']
          //   },
          //   {
          //     id: 'wardrobe',
          //     type: 'media', // 自定义类型
          //     title: '多样性系统',
          //     text: '定制衣柜',
          //     position: { pitch: -20, yaw: 200 },
          //     description: `
          //       <p>天目铁木</p>
          //       <ul>
          //         <li>珍惜濒危植物+</li>
          //         <li>树龄60年</li>
          //         <li>高15米</li>
          //       </ul>
          //     `,
          //     video: 'tv-demo.mp4',
          //     poster: 'sw1.jpg',
          //     images: ['sw2.jpg', 'sw3.jpg']
          //   },
          //   {
          //     id: 'desk',
          //     type: 'media', // 自定义类型
          //     title: '多样性系统',
          //     text: '办公学习桌',
          //     position: { pitch: -10, yaw: 110 },
          //     description: `
          //       <p>天目铁木</p>
          //       <ul>
          //         <li>珍惜濒危植物+</li>
          //         <li>树龄60年</li>
          //         <li>高15米</li>
          //       </ul>
          //     `,
          //     video: 'tv-demo.mp4',
          //     poster: 'sw1.jpg',
          //     images: ['sw2.jpg', 'sw3.jpg']
          //   }
          // ],
          // 'bedroom2': [
          //   {
          //     id: 'bed2',
          //     type: 'media', // 自定义类型
          //     title: '多样性系统',
          //     text: '书桌',
          //     position: { pitch: -8, yaw: 60 },
          //     description: `
          //        <p>天目铁木</p>
          //       <ul>
          //         <li>珍惜濒危植物+</li>
          //         <li>树龄60年</li>
          //         <li>高15米</li>
          //       </ul>
          //     `,
          //     video: 'tv-demo.mp4',
          //     poster: 'sw1.jpg',
          //     images: ['sw2.jpg', 'sw3.jpg']
          //   },
          //   {
          //     id: 'bookshelf',
          //     text: '电视',
          //     position: { pitch: 0, yaw: 170 },
          //     description: `
          //        <p>天目铁木</p>
          //       <ul>
          //         <li>珍惜濒危植物+</li>
          //         <li>树龄60年</li>
          //         <li>高15米</li>
          //       </ul>
          //     `,
          //     video: 'tv-demo.mp4',
          //     poster: 'sw1.jpg',
          //     images: ['sw2.jpg', 'sw3.jpg']
          //   },
          //   {
          //     id: 'window2',
          //     type: 'media', // 自定义类型
          //     title: '多样性系统',
          //     text: '飘窗设计',
          //     position: { pitch: 5, yaw: 270 },
          //     description: `
          //       <p>天目铁木</p>
          //       <ul>
          //         <li>珍惜濒危植物+</li>
          //         <li>树龄60年</li>
          //         <li>高15米</li>
          //       </ul>
          //     `,
          //     video: 'tv-demo.mp4',
          //     poster: 'sw1.jpg',
          //     images: ['sw2.jpg', 'sw3.jpg']
          //   }
          // ]
        }
      }
    },
    methods: {
      changeRoom(roomId) {
        this.currentRoom = roomId;
      }
    },
    mounted() {
      EventBus.$emit('map-show', false);
    }
  }
</script>

<style>
  body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
  }

  .panorama-container {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    display: flex;
    pointer-events: auto;
  }

  .panorama-viewer {
    width: 100%;
    height: 100%;
  }

  .floor-plan {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 200px;
    height: 200px;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    z-index: 10;
  }
</style>